<template>
  <div class="dashboard-container">
    <div class="dashboard-text">🥳 你好, {{ userName }}</div>
    <el-divider />

    <el-row :gutter="20">
      <el-col :lg="12" :xs="24">
        <div class="is-size-4 my-5 has-text-weight-bold">
          <span class="primary-color">[</span> 正在进行<span
            class="primary-color"
          >
            ]</span>
          <el-button
            style="float:right"
            class="mx-4"
            type="text"
            @click="toExam"
          >查看更多</el-button>
        </div>
        <el-table border stripe :data="examListData">
          <el-table-column prop="id" label="编号" width="60" />
          <el-table-column prop="title" label="名称" />
          <el-table-column
            prop="end_time"
            :formatter="dateFormat"
            label="结束时间"
            width="150"
          />
          <el-table-column width="100">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="attendExam(scope.row)"
              >去考试</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <!--  -->
      <el-col :lg="12" :xs="24">
        <div class="is-size-4 my-5 has-text-weight-bold">
          <span class="primary-color">[</span> 固定练习<span
            class="primary-color"
          >
            ]</span>
        </div>
        <el-table border stripe :data="exerciseListData">
          <el-table-column prop="id" label="编号" width="60" />
          <el-table-column prop="title" label="名称" />
          <el-table-column width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="attendExercise(scope.row)"
              >做练习</el-button>
            </template>
          </el-table-column>
          <el-table-column width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="checkExerviseDetail(scope.row)"
              >查看作答情况</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 考试详情 -->
    <el-dialog fullscreen :visible.sync="detailDialogVisible">
      <!-- 试卷本体 -->
      <exam-paper
        mode="review"
        :exam-id="detail.examId"
        :exam-title="detail.examTitle"
        :subjcet="'得分：' + detail.userScore + ' / ' + detail.paperScore"
        :single-questions="detail.single"
        :multiple-questions="detail.multiple"
      />
    </el-dialog>
  </div>
</template>

<script>
const dayjs = require('dayjs')
const examApi = require('@/api/exam')
import ExamPaper from '@/components/ExamPaper.vue'

export default {
  name: 'Dashboard',
  components: {
    ExamPaper
  },
  data() {
    return {
      examListData: [],
      exerciseListData: [],
      userName: this.$store.state.user.userName,
      flag: 2,
      detailDialogVisible: false,
      detail: {}
    }
  },

  mounted() {
    this.$loading()
    this.fetchExamList()
    this.fetchExerciseList()
  },

  methods: {
    fetchExamList() {
      examApi
        .getExamList()
        .then(res => {
          const nowMills = dayjs().valueOf()
          // 判断时间是否晚于现在 用时间戳
          res.data.exams.forEach(element => {
            if (
              nowMills > element.early_start_time &&
              nowMills < element.end_time
            ) {
              this.examListData.push(element)
            }
          })
          this.flag--
          if (this.flag === 0) this.$loading().close()
        })
        .catch(() => {
          this.$loading().close()
        })
    },

    fetchExerciseList() {
      examApi
        .getExerciseList()
        .then(res => {
          console.log('getExerciseList', res)
          this.exerciseListData = res.data.exercises
          this.flag--
          if (this.flag === 0) this.$loading().close()
        })
        .catch(() => {
          this.$loading().close()
        })
    },

    toExam() {
      this.$router.push('/examList')
    },

    attendExam(row) {
      console.log(row)
      this.$router.push({
        name: 'exam',
        params: {
          examId: row.id,
          examTitle: row.title,
          subject: row.subject,
          endTime: row.end_time
        }
      })
    },

    attendExercise(row) {
      this.$router.push({
        name: 'exam',
        params: {
          examId: row.id,
          examTitle: row.title,
          subject: row.subject,
          mode: 'exercise'
        }
      })
    },

    checkExerviseDetail(row) {
      examApi
        .getExamPaperQuestionAnswer(row.id)
        .then(res => {
          console.log(res)
          this.detail = {
            single: res.data.single,
            multiple: res.data.multiple,
            examId: row.id,
            examTitle: row.title,
            userScore: res.data.userScore,
            paperScore: res.data.paperScore
          }
          setTimeout(() => {
            this.recoverAnswer(res.data.single)
            this.recoverAnswer(res.data.multiple)
          }, 500)
          this.detailDialogVisible = true
        })
        .catch(() => {})
    },

    recoverAnswer(data) {
      console.log('recover Answer.....', data)
      data.forEach(element => {
        this.$nextTick(() => {
          // console.log(`question${element.id}`);
          const q = this.$refs[`question${element.id}`]
          // const q = document.getElementById(`question${element.id}`)
          // console.log(q);
          if (q) q[0].setAnswer(element.choiceAnswer)
        })
      })
    },

    dateFormat(row, column, cellValue, index) {
      if (cellValue) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
      } else {
        return '-'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
